<template>
	<view class="navigation-container" :style="{height: navBarHeight + 'px'}">
		<view class="status-bar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
		<view class="search-part" :style="{
			marginTop: res.top-statusBarHeight + 'px',
			height: res.height+'px',
			backgroundSize:res.height+'px ' +res.height+'px',
			lineHeight:res.height+'px'
		}">
			想买文创搜一搜
		</view>		
		<image src="../static/back.png" class="navigationBack" mode="heightFix" :style="{
			height: (res.height-5)+'px'
		}" @click="goBack"></image>
	</view>
</template>

<script>
	import { onBeforeMount } from "vue"
	export default {
		name:"productDetailNavigationBar",
		setup(props,context){
			let statusBarHeight = 0;
			statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			let res=wx.getMenuButtonBoundingClientRect();
			let navBarHeight = statusBarHeight+res.height+10;
			onBeforeMount(()=>{
				context.emit('height',navBarHeight)
			})
			
			function goBack(){
				context.emit('showPart',1)
			}
			
			return {
				statusBarHeight,
				navBarHeight,
				res,
				goBack
			}
		}
	}
</script>
	
<style scoped>
	.navigation-container{
		position: fixed;
		top: 0;
		z-index: 100;
		background-color: #9BCDD2;
		width: 100%;
	}
	
	.search-part{
		background: no-repeat url('@/static/index/search.png');
		background-position: 10px;
		background-color: #dddddd;
		border-radius: 100rpx;
		width: 400rpx;
		margin-left: 100rpx;
		padding: 0rpx 15rpx;
		color: #515151;
		text-align: center;
	}
	
	.navigationBack{
		position: absolute;
		bottom: 20rpx;
		left: 15rpx;
	}
</style>